<template>
    <div class="dictionaryManage">
        <el-carousel :autoplay="false" type="card" height="300px">
            <el-carousel-item label="冰箱">
                <el-image fit="scale-down" style="width: 700px; height: 300px"
                          :src="require('@/assets/images/eleappimages/冰箱.png')"></el-image>
            </el-carousel-item>
            <el-carousel-item label="空调">
                <el-image fit="scale-down" style="width: 700px; height: 300px"
                          :src="require('@/assets/images/eleappimages/空调.png')"></el-image>
            </el-carousel-item>
            <el-carousel-item label="油烟机">
                <el-image fit="scale-down" style="width: 700px; height: 300px"
                          :src="require('@/assets/images/eleappimages/油烟机.png')"></el-image>
            </el-carousel-item>
            <el-carousel-item label="洗衣机">
                <el-image fit="scale-down" style="width: 700px; height: 300px"
                          :src="require('@/assets/images/eleappimages/洗衣机.png')"></el-image>
            </el-carousel-item>
            <el-carousel-item label="热水器">
                <el-image fit="scale-down" style="width: 700px; height: 300px"
                          :src="require('@/assets/images/eleappimages/热水器.png')"></el-image>
            </el-carousel-item>
            <el-carousel-item label="电视机">
                <el-image fit="scale-down" style="width: 700px; height: 300px"
                          :src="require('@/assets/images/eleappimages/电视机.png')"></el-image>
            </el-carousel-item>
            <el-carousel-item label="灯具">
                <el-image fit="scale-down" style="width: 700px; height: 300px"
                          :src="require('@/assets/images/eleappimages/灯具.png')"></el-image>
            </el-carousel-item>
        </el-carousel>


        <el-collapse accordion>
            <el-collapse-item v-for="(room,index) in tableData"
                              :title="room.name"
                              :name="index">
                <div style="font-size:16px">
                    {{room.eleappcodes}}
                </div>
            </el-collapse-item>
        </el-collapse>

    </div>
</template>


<script>
    import {listall} from "../../../api/bishe/room";

    export default {
        data() {
            return {
                urlList: [
                    '@/assets/images/threeone.png',
                    '@/assets/images/oneone.png',
                    '@/assets/images/twoone.png'
                ],
                tableData: []
            }
        },
        created() {
            this.selectAll();
        },
        methods: {
            selectAll() {
                listall()
                    .then(res => {
                        console.log(res);
                        this.tableData = res.data.items;
                        console.log(this.tableData);
                    })
                    .catch(err => {
                        this.$message({
                            message: "请求失败",
                            type: "warning",
                            center: true
                        });
                    });
            }
        }
    }
</script>


<style lang='less' scoped>
    .dictionaryManage {
        width: 98.5%;
        height: 100%;
        padding: 10px;
        .cardWrap {
            display: flex;
            justify-content: space-between;
            height: 60px;
            padding: 0 60px;
            height: 40px;
            .headerLeft {
                .el-input {
                    width: auto;
                    margin-right: 10px
                }
                display: flex;
                justify-content: space-between
            }
            span {
                margin-right: 30px;
            }
        }
    }

    .el-carousel__item h3 {
        color: #ffffff;
        font-size: 14px;
        line-height: 1000px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        /*background-color: #99a9bf;*/
    }

    .el-carousel__item:nth-child(2n+1) {
        /*background-color: #d3dce6;*/
    }

</style>
